<script setup lang="ts">
import {useRouter, useRoute} from 'vue-router'
import type {FormInstance, FormRules, UploadInstance, UploadProps, UploadRawFile} from 'element-plus'
import {genFileId} from 'element-plus'
import {reactive, ref, h, computed, nextTick, provide, watch} from 'vue'
import {Server} from '../stores/ajax';
import {
    format as timeFormat,
} from 'silly-datetime';
import {ElTable} from 'element-plus'
import {Delta, QuillEditor} from '@vueup/vue-quill'
import MyQuill from '@/components/quillComponent.vue'
import QuillRead from '@/components/quillReadComponent.vue'
import {GetUserState} from '@/stores/userState';
import {htmlToText} from 'html-to-text'
import {QuillDeltaToHtmlConverter} from 'quill-delta-to-html'
let user = GetUserState()
let content = $ref<Delta>(new Delta())
let newPosts = $ref([])

let tableData = $ref([
    {
        pid: 10001,
        title: "",
        content: {},
        text: '',
        crate_time: "2018-11-10 22:11:00",
        modify_time: "2018-11-10 22:11:00",
    },]
)
tableData.pop()
let multipleSelection = $ref<any[]>([])
const handleSelectionChange = (val: any[]) => {
    multipleSelection = val
}
const statusSelection = $ref<any[]>()
const statusOptions = [
    {
        value: '1',
        label: '已通过',
    },
    {
        value: '4',
        label: '不通过',
    },
    {
        value: '0',
        label: '未审核',
    },
    // {
    //     value: '3',
    //     label: '已屏蔽',
    // }
]

let subareaSelection = $ref<any[]>()
const subareaOptions = $ref([
    {
        value: '10001',
        label: '动态',
    },
    {
        value: '10002',
        label: '论坛',
    },
])
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
const timeSelection = $ref<Date[]>()
const useridSelection = $ref<number>()
const handleFilter = async () => {
    let condition = {} as any
    if (timeSelection) {
        condition.start_time = timeFormat(timeSelection[0], 'YYYY-MM-DD HH:mm:ss')
        condition.end_time = timeFormat(timeSelection[1], 'YYYY-MM-DD HH:mm:ss')
    }
    if (useridSelection) condition.user_id = useridSelection
    if (subareaSelection) condition.subarea = subareaSelection
    if (statusSelection) condition.status = statusSelection
    await Server.get('/post/get_moderate_posts', condition, true).then((res) => {
        let data = res.data
        if (data && data.code == 0) {
            let res = data.return
            for (let post of res as any) {
                try {
                    post.content = JSON.parse(post.content)
                    post.text = htmlToText(new QuillDeltaToHtmlConverter(post.content.ops, {}).convert())
                    post.modify_time = timeFormat(post.modify_time, 'YYYY-MM-DD HH:mm:ss')
                    post.create_time = timeFormat(post.create_time, 'YYYY-MM-DD HH:mm:ss')

                } catch {post.content = {}}
            }
            console.log(res)
            tableData = res
        }
    }).catch(console.error)
}
const handleChangeStatus = async (status: number) => {
    console.log(currentRow)
    let post = []
    let comment = []
    if (currentRow.cid) comment.push(currentRow.cid)
    else post.push(currentRow.pid)
    Server.get('/post/change_status', {post, comment, status}, true).then((res) => {
        let data = res.data
        if (data && data.code == 0) {
            let res = data.return
            // console.log(res)
        }
    }).catch(console.error)
    currentRow.status = status
    selectNextRow()
}
const handleChangeStatusAll = async (status: number) => {

}
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (row.status == 4) {
        return 'warning-row'
    } else if (row.status == 1) {
        return 'success-row'
    }
    return ''
}
let currentRow = $ref<any>()
const handleCurrentChange = (val: any | undefined) => {
    currentRow = val
    if(currentRow.content)
    editor.setContents(currentRow.content)
}
const setCurrent = (row?: any) => {
    multipleTableRef.value!.setCurrentRow(row)
}
const selectNextRow = () => {
    for (let i = 0; i < tableData.length; i++) {
        if (tableData[i] == currentRow) {
            if (i == tableData.length - 1) return false
            else {
                setCurrent(tableData[i + 1])
                return true
            }
        }
    }
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const editor = $ref<any>()

</script>

<template>
    <div class="fv" style="flex-basis: 600px;">
        <div class="fv">
            <div class="fh" style="justify-content: start; flex-wrap: wrap;gap:15px">
                <div>
                    <div class="selection_title">
                        日期
                    </div>
                    <el-date-picker v-model="timeSelection" type="datetimerange" :shortcuts="shortcuts"
                        range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
                </div>
                <div>
                    <div class="selection_title">
                        用户id
                    </div>
                    <el-input v-model="useridSelection" placeholder="Please input" clearable />
                </div>
                <div>
                    <div class="selection_title">
                        分区
                    </div>
                    <el-select v-model="subareaSelection" multiple placeholder="Select" style="width: 240px">
                        <el-option v-for="item in subareaOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div>
                    <div class="selection_title">
                        状态
                    </div>
                    <el-select v-model="statusSelection" multiple placeholder="Select" style="width: 240px">
                        <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="fh">
                    <el-button style="align-self: end;" @click="handleFilter">筛选</el-button>
                </div>
            </div>
            <div>
                TODO 隐藏按钮
            </div>
        </div>
        <div class="fh" style="justify-content: start;">
            <el-table ref="multipleTableRef" :data="tableData" style="width: 400px" :row-class-name="tableRowClassName"
                highlight-current-row @current-change="handleCurrentChange" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="28" />
                <el-table-column property="pid" label="id" width="85" />
                <el-table-column property="text" label="content" width="120" />
                <el-table-column label="Date" width="120">
                    <template #default="scope">{{ scope.row.create_time}}</template>
                </el-table-column>
            </el-table>
            <div>
                <div style="width: 400px;height: 500px;border: 1px solid black;">
                    <quillReadComponent @ready='(e:any)=>{editor = e}'/>
                </div>
                <div class="fh" style="justify-content: start; gap: 20px;">
                    <el-button type="success" round @click="handleChangeStatus(1)">通过审核</el-button>
                    <el-button type="primary" round @click="selectNextRow">跳过这条</el-button>
                    <el-button type="warning" round @click="handleChangeStatus(4)">不通过</el-button>
                </div>
            </div>
        </div>


    </div>
</template>

<style scoped>
.ql-bubble .ql-editor {
    padding: 0;
}

.selection_title {
    line-height: 40px;
}
</style>
<style>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
